<template>
	<view class="address-item">
		<view class="address-item-top" @click="selectAddress">
			<view class="address-item-top-left">
				<view class="userinfo"><text>张天师</text><text>13623569618</text></view>
				<text class="address-detail">广东省珠海市香洲区唐家弯镇幸福小区3街26号</text>
			</view>
			<label class="radio" v-if="type==='picker'">
				<radio color="#287EFF" :checked="isSelect" />
			</label>
		</view>
		<view class="action-wrap" v-if="type ==='manage'">
			<label class="radio" @click="toggleDefaultChecked">
				<radio color="#287EFF" :checked="isChecked" /><text :style="{color:isChecked ? '#333333' : '#999999' }">设为默认</text>
			</label>
			<view class="btns-wrap">
				<view class="btn">编辑</view>
				<view class="btn">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 一种是管理状态，一种是选择状态
			type: {
				type: String,
				default: 'manage'
			},
			item: {
				type: Object,
				default() {
					return {
						name: '张子萱',
						tel: '13923369608',
						address: '广东省珠海市香洲区幸福小区26栋广东省珠海市香'
					};
				}
			}
		},
		data() {
			return {
				isChecked: false,
				isSelect: false
			}
		},
		methods: {
			toggleDefaultChecked(item) {
				this.isChecked = !this.isChecked;
			},
			editClick() {

			},
			delClick() {
				uni.showModal({
					content:'确认是否删除该地址',
					complete(res) {
						if (res.confirm) {
							console.log('---- 确认删除 ----:', res)
						}
					}
				})
			},
			selectAddress() {
				if (this.type === 'manage') {
					return;
				}
				this.isSelect = !this.isSelect;
				this.$emit('select', this.isSelect ? this.item : null);
			}
		}
	}
</script>

<style lang="scss" scoped>
.address-item{
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 24rpx 22rpx;
	border-radius: 8rpx;
	margin-bottom: 24rpx;
	background-color: white;
}
.address-item-top{
	display: flex;
	align-items: center;
	.address-item-top-left{
		flex: 1;
	}
}
.userinfo{
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #111111;
	text:nth-of-type(1){
		margin-right:20rpx;
		max-width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;	
	}
}
.address-detail{
	font-size: 28rpx;
	line-height: 40rpx;
	word-break: break-all;
	margin: 16rpx 0 24rpx 0;
	color: #303030;
}
.action-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 22rpx;
	margin-top: 24rpx;
	border-top:1px solid #eee;
	.btns-wrap{
		display: flex;
		align-items: center;
		.btn{
			display: flex;
			flex:1;
			align-items: center;
			justify-content: center;
			width: 112rpx;
			line-height: 36rpx;
			text-align: center;
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			border-radius: 32rpx;
			white-space: nowrap;
			font-size: 32rpx;
			&:nth-of-type(1) {
				border: 2rpx solid #287EFF;
				background-color:#287EFF;
				color: #ffffff;
			}
			&:nth-of-type(2) {
				margin-left: 20rpx;
				border: 2rpx solid #F5222D;
				color: #F5222D;
			}
		}
	}
}
</style>
